<template>
  <div class="container">
    <h1>组件Count中的求和数据：{{ sum }}</h1>
    <h1>列表中第一个人：{{ firstPersonName }}</h1>
    <input type="text" v-model="name">
    <button @click="add" >添加</button>
    <ul>
      <li v-for="item in personList" :key = "item.id">{{item.name}} </li>
    </ul>
  </div>
</template>

<script >
  export default {
    name: 'Person',
    data() {
      return {
        name: ''
      }
    },
    computed: {
      sum() {
        return this.$store.state.CountAbout.sum
      },

      personList() {
        return this.$store.state.PersonAbout.personList
      },
      // 获取getters中的数据时 需要添加模块名
      firstPersonName (){
        return this.$store.getters['PersonAbout/firstPersonName']
      }
    },
    methods: {
      add() {
        let person = {
          id : Date.now(),
          name: this.name,
        }
        //开启命名空间后 调用dispatch时 需在dispatch的第一个参数中传入模块名 同理 调用commit 时 也需要传入模块名
        this.$store.dispatch('PersonAbout/add', person)
        this.name = ''
      }
    }
  }
</script>



<style scoped>

</style>